<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册</title>
		<link rel="stylesheet" type="text/css" href="css/register.css"/>
		<link rel="stylesheet" type="text/css" href="css/jquery.idcode.css"/>
		<script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.idcode.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 头部 -->
		<div class="header">
			
		</div>
		
		<!-- 头上的标签 -->
		<div class="tabBox clear">
			<span class="reg_show">个人用户</span>
			<div class="login">
				已有账号,立即
				<a href="login.html">登录</a>
			</div>
		</div>
		
		<!-- 注册主体部分 -->
		<div class="reg_main">
			<ul>
				<form>
					<li class="regUname">
						<label><font>*&nbsp;&nbsp;&nbsp;</font>账户名:</label>
						<span class="unameReg regM">
							<input type="text" class="uname" id="uname" name="uname"/>
							<em></em>
						</span>
						<span class="unameError"></span>
					</li>
					<li>
						<label><font>*&nbsp;&nbsp;&nbsp;</font>登录密码:</label>
						<span class="upswReg regM">
							<input type="text" name="upsw" id="upsw" class="upsw"/>
							<em></em>
						</span>
						<span class="upswError"></span>
					</li>
					<li class="safe">
						<font>安全程度:&nbsp;&nbsp;&nbsp;</font>
						<em>弱</em>
						<em>中</em>
						<em>强</em>
					</li>
					<li class="regUcpsw">
						<label><font>*&nbsp;&nbsp;&nbsp;</font>确认密码:</label>
						<span class="ucpswReg regM">
							<input type="text" name="ucpsw" id="ucpsw" class="ucpsw"/>
							<em></em>
						</span>
						<span class="ucpswError"></span>
					</li>
					<li class="codeChk">
						<span class="chkCode">
							<label><font>*&nbsp;&nbsp;&nbsp;</font>验证码:</label>
							<input type="text" class="txtVerification" id ="Txtidcode" name="loginCode"/>
							<span id="idcode"></span>
							<span class="codeTitle">看不清?<a href="javascript:;;">换一换</a></span>
							<span class="uchkError"></span>
						</span>
					</li>
					<li class="agreeM">
						<span class="agree">
							<input type="checkbox" name="ckb" id="ckb" class="ckb" value="" />
							<a href="javascript:;;">我已阅读并同意<font size="" color="">《顺丰优选用户注册协议》</font></a>
						</span>
					</li>
					<li>
						<span>
							<button>立即注册</button>
						</span>
					</li>
				</form>
			</ul>
			
			<div class="regMore">
				<img src="img/register/reg_tip.png">
				<a href="javascript:;">了解更多&gt;&gt;</a>
			</div>
		</div>
		
		<!-- 页面底部 -->
		<div class="footer">
			
		</div>
		<script type="text/javascript">
			$(() => {
				$(".header").load("./reg_header.html");
				$(".footer").load("./reg_footer.html");
				
				$.idcode.setCode();//加载生成验证码方法
				
				var unameFlag = false;
				var upswFlag = false;
				var ucpswFlag = false;
				var loginCodeFlag = false;
				var ckbFlag = false;
				
				//判断用户名
				$(".uname").on("blur",function(){
					var strUname = $(this).val();
					// var reg = /^[0-9a-z\u4e00-\u9fa5]{5-16}$/i;
					$(".unameReg em").hide()
					$(".unameError").text("");
					if(strUname.trim().length == 0){
						// $(".unameReg em").show()
						$(".unameError").text("用户名不能为空").css({
							"color":"red"
						})
						return;
					}
					// if(!reg.test(strUname)){
					// 	$(".unameError").text("用户名长度在5-15位,不能包含特殊符号").css({
					// 		"color":"red"
					// 	})
					// 	return;
					// }
					unameFlag = true;
					$(".unameReg em").show();
				})
				
				//判断密码
				$(".upsw").on("blur",function(){
					
					var strUpsw = $(this).val();
					var reg = /^.{6,18}$/;
					$(".upswReg em").hide()
					$(".upswError").text("");
					if(strUpsw.trim().length == 0){
						$(".upswError").text("密码不能为空").css({
							"color":"red"
						})
						$(".safe em").css({
							"background":""
						})
						return;
					}
					if(!reg.test(strUpsw)){
						$(".upswError").text("密码长度为5-18位").css({
							"color":"red"
						})
						return;
					}
					if(strUpsw.trim().length > 5 && strUpsw.trim().length <= 8){
						$(".safe em:eq(0)").css({
							"background":"orange"
						});
						$(".safe em:eq(1),.safe em:eq(2)").css({
							"background":""
						})
						
					}
					if(strUpsw.trim().length > 8 && strUpsw.trim().length <= 11){
						$(".safe em:eq(0),.safe em:eq(1)").css({
							"background":"yellow"
						})
						$(".safe em:eq(2)").css({
							"background":""
						})
					}
					if(strUpsw.trim().length > 11 && strUpsw.trim().length <= 15){
						$(".safe em").css({
							"background":"lightgreen"
						})
					}
					upswFlag = true;
					$(".upswReg em").show();
				});
				
				//确认密码
				$(".ucpsw").on("blur",function(){
					var strUcpsw = $(this).val();
					var reg = $(".upsw").val();
					$(".ucpswReg em").hide()
					$(".ucpswError").text("");
					if(strUcpsw.trim().length == 0){
						$(".ucpswError").text("请填写确认密码!").css({
							"color":"red"
						})
						return;
					}
					if(reg != strUcpsw){
						$(".ucpswError").text("前后密码要一致哦!").css({
							"color":"red"
						})
						return;
					}
					ucpswFlag = true;
					$(".ucpswReg em").show();
				})
				
				$("#Txtidcode").on("blur",function(){
					var IsBy = $.idcode.validateCode();
					$(".uchkError").text("");
					if(!IsBy){
						$(".uchkError").text("请填写正确的验证码").css({
							"color":"red"
						})
						return;
					}
					loginCodeFlag = true;
				})
				
				
				$("form").on("submit",function(){
					
					if(!(unameFlag && upswFlag && ucpswFlag && loginCodeFlag)){
						alert("请先完善信息");
						return;
					}
					$.ajax({
						url:"http://127.0.0.1:8080/api/reg",
						data:$("form").serialize(),
						type:"post",
						dataType:"json",
						// headers:{
						// 	"Content-Type":"x-www-form-urlencoded"
						// 	"X-Requested-With":"XMLHttpRequest"
						// }
					}).then((data) => {
						console.log(data);
						
					})
					
					return false;
				})
			})
		</script>
	</body>
</html>
